<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户管理</title>
    <link href="../../static/css/index.css" rel="stylesheet" th:href="@{/static/css/index.css}">
    <!-- 自定义css文件 -->
    <link href="../../static/css/common.css" rel="stylesheet" th:href="@{/static/css/common.css}">
</head>

<body>

<div th:replace="~{nav :: nav('用户管理')}"></div>
<div th:replace="~{header :: header}"></div>
<div class="margin-helper">
    <div class="samoyed-content">
        <div th:replace="~{pageHead :: pageHead(pageName='用户管理', parentMenu='菜单导航')}"></div>
        <div id="page-content" class="page-content" v-cloak>

            <el-container>

                <el-header height="50">

                    <el-row>
                        <el-col :span="2" style="line-height: 40px">
                            <spam>用户电话:</spam>

                        </el-col>
                        <el-col :span="3">

                            <el-input v-model="info.telphone" ></el-input>



                        </el-col>
                        <el-col :span="2">
                            &nbsp;

                        </el-col>


                        <el-col :span="2" style="line-height: 40px">

                            <spam>商店名称:</spam>
                        </el-col>
                        <el-col :span="5">

                            <el-input v-model="info.shopName" placeholder="可以模糊搜索"></el-input>

                        </el-col>
                        <el-col :span="2">
                            &nbsp;

                        </el-col>

                        <el-col :span="8" style="text-align: right">
                            <el-button type="primary" @click="search">搜索</el-button>

                        </el-col>
                    </el-row>

                </el-header>


                <el-main>
                    <el-table
                            :data="tableData"
                            border
                            style="width: 100%; min-height: 500px" >
                        <el-table-column type="expand">
                            <template slot-scope="tableData">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <el-form-item label="用户ID"><span>{{ tableData.row.userId }}</span>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="userUserName"
                                label="用户名称"
                                width="150">
                        </el-table-column>


                        <el-table-column
                                prop="userPassword"
                                label="密码"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="userTelphone"
                                label="电话"
                        >
                        </el-table-column>

                        <el-table-column
                                prop="userAddress"
                                label="地址"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="userShopName"
                                label="商店名称"
                        >
                        </el-table-column>

                        <el-table-column
                                prop="userStatus"
                                label="状态"
                        >
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="100">
                            <template slot-scope="scope">
                                <el-button type="text" @click="handleUpdate(scope.row.userId)" size="small">修改</el-button>
                                <el-button type="text" @click="handleDrop(scope.row.userId)" size="small">作废</el-button>

                            </template>

                        </el-table-column>

                    </el-table>
                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :current-page.sync="pageNum"
                            :page-size="pageSize"
                            layout="total, prev, pager, next"
                            :total="total">
                    </el-pagination>


                    <el-dialog title="修改用户信息" :visible.sync="dialogTableVisible">
                        <el-card class="box-card" style="width:400px">
                            <div slot="header" class="clearfix">
                                <span>用户信息</span>
                            </div>
                            <el-main>
                                <el-form  label-width="100px" >
                                    <el-form-item label="用户编号">
                                        <el-input v-model="user.userId"  disabled></el-input>
                                    </el-form-item>
                                    <el-form-item label="用户名称">
                                        <el-input v-model="user.userUserName"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码">
                                        <el-input v-model="user.userPassword"></el-input>
                                    </el-form-item>
                                    <el-form-item label="电话">
                                        <el-input v-model="user.userTelphone"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地址">
                                        <el-input v-model="user.userAddress"></el-input>
                                    </el-form-item>
                                    <el-form-item label="商店名称">
                                        <el-input v-model="user.userShopName"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="updateCommit">修改确认</el-button>
                                    </el-form-item>
                                </el-form>
                            </el-main>
                        </el-card>
                    </el-dialog>




                </el-main>

            </el-container>

        </div>
    </div>
</div>

<script src="../../static/js/vue.js" th:src="@{/static/js/vue.js}"></script>
<script src="../../static/js/element.js" th:src="@{/static/js/element.js}"></script>
<script src="../../static/js/jquery-3.3.1.min.js" th:src="@{/static/js/jquery-3.3.1.min.js}"></script>
<script src="../../static/js/utils.js" th:src="@{/static/js/utils.js}"></script>
<script src="../../static/js/config.js" th:src="@{/static/js/config.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>

<!-- 引用vue组件相关的js文件 -->
<div th:replace="~{nav :: vue('用户管理')}"></div>
<div th:replace="~{header :: vue}"></div>
<script>

    var vue =new Vue({
        el: '#page-content',
        data:{
            tableData: '',
            pageNum:1,
            pageSize:8,
            total:0,
            info:{
                telphone:'',
                shopName:''
            },
            user:{

            },
            dialogTableVisible:false
            ,
            web_static_server:_global_web_server+"/static/"
        },
        methods:{
            init:function () {
                var url=_global_web_server +"/user/list";
                var _self=this;
                axios.get(url,{
                    params:{
                        pageNum:_self.pageNum,
                        pageSize:_self.pageSize,
                        telphone:_self.info.telphone,
                        shopName:_self.info.shopName
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    var  pageInfo =jsonResult.data;
                    _self.tableData=pageInfo.list;
                    _self.total=pageInfo.total;

                }).catch(function (reason) {
                    console.log(reason);
                });
            },
            search:function () {
                var _self=this;

                if(_self.info.telphone=='' && _self.info.shopName==''){

                    _self.$notify({
                        title:'警告',
                        message:'没有任何搜索项发现',
                        type: 'warning'
                    });
                }else{
                    _self.pageNum=1;  //初始化第一页
                    this.init();
                }

            },
            handleCurrentChange:function (value) {
                this.pageNum=value;
                this.init();

            },
            handleDrop:function (id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function(){
                    var url=_global_web_server +"/user/del";
                    var _self=this;
                    axios.get(url,{
                        params:{
                            uid:id
                        }
                    }).then(function (response) {
                        var  jsonResult=response.data;
                        if(jsonResult.status=="200"){
                            window.location.reload();
                        }else{
                            alert(jsonResult.message);
                        }

                    }).catch(function (reason) {
                        alert("请求异常");
                    });
                }).catch(function() {

                });
            },
            updateCommit:function () {


                var _self=this;
                var url=_global_web_server +"/user/update";
                var params = new URLSearchParams();
                params.append('userId', _self.user.userId);
                params.append('userUserName',_self.user.userUserName);
                params.append('userPassword', _self.user.userPassword);
                params.append('userTelphone', _self.user.userTelphone);
                params.append('userAddress', _self.user.userAddress);
                params.append('userShopName',_self.user.userShopName);
                axios.post(url,params).then(function (response) {
                    var self =this;
                    var  jsonResult=response.data;
                    if (jsonResult.status == 200){
                        // window.location.reload();
                        _self.$notify({
                            title:'提示',
                            message:"已经修改，下次刷新有效",
                            type: 'success'
                        });

                        _self.dialogTableVisible=false;


                    }else{
                        _self.$notify({
                            title:'提示',
                            message:jsonResult.message,
                            type: 'error'
                        });
                    }
                }).catch(function (reason) {
                    var self =this;
                    _self.$notify({
                        title:'提示',
                        message:"出错了,可能类型不匹配",
                        type: 'error'
                    });
                });





            },
            handleUpdate:function (id) {
                var url=_global_web_server +"/user/findById";
                var _self=this;
                axios.get(url,{
                    params:{
                        uid:id
                    }
                }).then(function (response) {
                    var  jsonResult=response.data;
                    if(jsonResult.status=="200"){
                        //修改界面集合数据
                        _self.dialogTableVisible=true;
                        _self.user=jsonResult.data;


                    }else{
                        alert(jsonResult.message);
                    }

                }).catch(function (reason) {
                    alert("请求异常");
                });
            }
            
        }
    });
    vue.init();


</script>

</body>

</html>